<template>
	<view class="minepage">
		<headnav title='个人中心' :showMenu='false' :bgc="'#f1f1f1'"></headnav>
		<loading v-if='!Object.keys(info).length'></loading>  		
		<container v-else>
			<view style="height: 20rpx;"></view>

			<view class="topwrap shadow" :style="{background:'url('+info.profile.backgroundUrl+')'}" v-if="info.profile.backgroundUrl">
				<view style="display: flex;padding-top: 30rpx;">
					<image :src="info.profile.avatarUrl" class="avatar shadow"></image>
				</view>
				<view style="text-align: center;font-size: 30rpx;margin: 20rpx 0;">
					<text class="text-bold text-white text-shadow" style="margin: 20rpx;">关注：{{info.profile.follows}}</text>
					<text class="text-bold text-white text-shadow" style="margin: 20rpx;">粉丝：{{info.profile.followeds}}</text>
				</view>
			</view>

			<view class="card-menu  cu-list menu">
				<!-- arrow -->
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-emoji text-orange"></text>
						<text class="text-grey">昵称</text>
					</view>
					<view class="action">
						<text class="text-orange text-sm">{{info.profile.nickname}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-edit text-orange"></text>
						<text class="text-grey">个性签名</text>
					</view>
					<view class="action" style="display: flex;">
						<text class="text-orange text-sm textEl" style="max-width: 430rpx;display: inline-block;">{{info.profile.signature?info.profile.signature:'TA很懒,没有留下签名...'}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-vip text-orange"></text>
						<text class="text-grey">云村等级</text>
					</view>
					<view class="action">
						<text class="text-orange text-sm">{{info.level+' 级'}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-hotfill text-orange"></text>
						<text class="text-grey">听歌次数</text>
					</view>
					<view class="action">
						<text class="text-orange text-sm">{{info.listenSongs+' 次'}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-time text-orange"></text>
						<text class="text-grey">村龄</text>
					</view>
					<view class="action">
						<text class="text-orange text-sm">{{age}}</text>
					</view>
				</view>
			</view>
		</container>
	</view>
</template>

<script>
	import {
		userdetail,
		account
	} from '../../common/api.js'

	import headnav from '../../components/headNav/headNav.vue'
	import container from '../../components/container/container.vue'
	export default {
		components: {
			headnav,
			container,

		},
		data() {
			return {
				info: {}
			}
		},
		onLoad() {
			let userId = JSON.parse(uni.getStorageSync('userinfo')).userId
			Promise.all([userdetail(userId), account()]).then(res => {
				this.info = res[0].data
			})
		},
		onShow() {
			let userId = JSON.parse(uni.getStorageSync('userinfo')).userId
			Promise.all([userdetail(userId), account()]).then(res => {
				this.info = res[0].data
			})
		},
		methods: {

		},
		computed: {
			age() {
				let year = parseInt(this.info.createDays / 365)
				let date = new Date(this.info.createTime)
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				return year + ' 年 ( ' + y + " 年 " + m + ' 月 )'
			}
		}
	}
</script>

<style lang="scss">
	.minepage {

		.topwrap {
			border-radius: 20rpx;
			background: white;
			margin: 0 30rpx 20rpx;
			padding: 10rpx;
			background-size: calc(100vw - 40rpx) 100%;
			background-size: 20rpx 20rpx;
			position: relative;
			overflow: hidden;
		}

		.avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			margin: 0rpx auto 15rpx;
			border: 5rpx white solid;
		}
	}
</style>
